<template>
	<uni-nav-bar fixed="true" statusBar="true" border="false" left-icon="left" title="新增提现卡" @clickLeft="back"></uni-nav-bar>
	<view class="container">
		<uni-forms class="form" ref="form" :modelValue="formData" label-width='auto' :rules="rules">
			<uni-forms-item name="bankName" required>
				<view class="bg-white is-flex mt30 p3020">
					<view class="uni-flex wd100">
						<view class="mr15">
							<text>开户银行</text>
						</view>
						<view class="flex1">
							<input class="uni-input font-28 text-right" maxlength="30" placeholder="请输入开户银行" v-model="formData.bankName" />
						</view>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item name="bankCardNum" required>
				<view class="bg-white is-flex mt30 p3020">
					<view class="uni-flex wd100">
						<view class="mr15">
							<text>银行卡号</text>
						</view>
						<view class="flex1">
							<input class="uni-input font-28 text-right" maxlength="30" placeholder="请输入银行卡号" v-model="formData.bankCardNum" />
						</view>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item name="bankUserName" required>
				<view class="bg-white is-flex mt30 p3020">
					<view class="uni-flex wd100">
						<view class="mr15">
							<text>开户姓名</text>
						</view>
						<view class="flex1">
							<input class="uni-input font-28 text-right" maxlength="30" placeholder="请输入银行卡号开户姓名" v-model="formData.bankUserName" />
						</view>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item name="userIdCard" required>
				<view class="bg-white is-flex mt30 p3020">
					<view class="uni-flex wd100">
						<view class="mr15">
							<text>身份证号</text>
						</view>
						<view class="flex1">
							<input class="uni-input font-28 text-right" maxlength="30" placeholder="请输入银行卡开户身份证号" v-model="formData.userIdCard" />
						</view>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item name="bankMobile" required>
				<view class="bg-white is-flex mt30 p3020">
					<view class="uni-flex wd100">
						<view class="mr15">
							<text>电话号码</text>
						</view>
						<view class="flex1">
							<input class="uni-input font-28 text-right" maxlength="30" placeholder="请输入银行卡开户手机号" v-model="formData.bankMobile" />
						</view>
					</view>
				</view>
			</uni-forms-item>
		</uni-forms>
		<view class="fixed-bottom-wrap">
			<view class="schdule-card uni-flex">
				<view class="flex-item sign" @click="subForm">
					<text>确认保存</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api/webapi.js'; /*api*/
	import configs from '@/common/api/config.js';
	import storageUtil from '@/common/util/storageUtil.js';
	export default {
		data() {
			return {
				formData: {
					id: '',
					bankName: '',
					bankCardNum: '',
					bankUserName: '',
					userIdCard: '',
					bankMobile: ''
				},
				rules: {
					bankName: {
						rules: [{
							required: true,
							errorMessage: '请输入开户银行',
						}],
					},
					bankCardNum: {
						rules: [{
								required: true,
								errorMessage: '请输入银行卡号',
								trigger: ['change', 'blur'],
							},
							{
								pattern: '^[0-9]{16,19}$',
								errorMessage: '请正确输入银行卡号',
								trigger: ['change', 'blur'],
							}
						]
					},
					bankUserName: {
						rules: [{
							required: true,
							errorMessage: '请输入银行卡号开户姓名',
						}],
					},
					userIdCard: {
						rules: [{
								required: true,
								errorMessage: '请输入银行卡开户身份证号',
								trigger: ['change', 'blur'],
							},
							{
								pattern: '^[1-9]\\d{5}(?:18|19|20)\\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\\d|30|31)\\d{3}[\\dXx]$',
								errorMessage: '请正确输入银行卡开户身份证号',
								trigger: ['change', 'blur'],
							}
						]
					},
					bankMobile: {
						rules: [{
								required: true,
								errorMessage: '请输入银行卡开户手机号',
								trigger: ['change', 'blur'],
							},
							{
								pattern: '^1[3-9]\\d{9}$',
								errorMessage: '请正确输入银行卡开户手机号',
								trigger: ['change', 'blur'],
							}
						]
					},
				},
			}
		},
		computed: {

		},
		watch: {},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		onShow() {

		},
		onLoad(option) {
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			// 页面跳转
			navgetTo(page, param, type) {
				if (param != undefined) {
					type = type || '';
					let data = {
						data: param,
						page: type
					}
					uni.navigateTo({
						url: "/" + page + "?param=" + encodeURI(JSON.stringify(data))
					});
				} else {
					uni.navigateTo({
						url: "/" + page
					});
				}
			},
			subForm() {
				this.$refs.form.validate().then(valid => {
					if (valid) {
						api.addBank(this.formData).then(res => {
							if (res.code === 0) {
								uni.navigateTo({
									url: '/pages/my/withdrawal_card'
								})
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f8f8f8;
		height: 100vh;
	}

	.container {
		font-size: 14px;
		line-height: 24px;
	}

	::v-deep.uni-forms-item {
		margin-bottom: 0;
	}


	.fixed-bottom-wrap {
		position: fixed;
		z-index: 111;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		width: 100%;
		height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
		line-height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
	}

	.schdule-card {
		height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
		line-height: 60rpx;
		border-top: 1px solid #f8f8f8;
		padding-bottom: max(env(safe-area-inset-bottom),20px);

		.flex-item {
			padding-top: 10rpx;
			width: 25%;
			text-align: center;
			line-height: 40rpx;
		}

		.flex-item:last-child {
			width: 100%;
			padding-top: 0;
		}

		text {
			display: block;
		}

		.sign {
			height: 100%;
			color: $uni-text-color-white;
			background-color: $uni-text-color-green;
			font-size: 32rpx;
			line-height: 100%;

			text {
				line-height: 100rpx;
			}
		}
	}
	::v-deep.uni-forms-item__error{
		top: 70%;
	}
</style>